<!--  -->
<template>
	<view class="page">
		<uni-nav-bar :fixed="true" :statusBar="true" color="#ffffff" backgroundColor="#2D56C5" left-icon="left"
			title="发布车源" @clickLeft="setBack" />
		<view class="white-box">
			<view class="box-title">
				<text>车辆信息</text>
				<view class="box-title_bg"></view>
			</view>
			<view class="form-item">
				<view class="form-item_name"><text class="text-red">*</text>对应车型</view>
				<view class="form-item_value">
					<view v-if="currentCar.name">
						<view style="display: flex;">
							<view style="max-width: 300rpx;">{{currentCar.name}}</view>
							<view class="text-red marginLeft20" v-if="currentCar.source_type_name">
								{{currentCar.source_type_name}}
							</view>
						</view>
						<view style="font-size: 28rpx;color: #999999;" v-if="currentCar.guide_price">
							厂商指导价：{{currentCar.guide_price}}万</view>
					</view>
					<block v-else>
						<view class="placeholder">请选择</view>
					</block>
					<image class="form-item_more" src="@/static/fanhui.png" mode=""></image>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item_name"><text class="text-red">*</text>报价/优惠</view>
				<view v-if="currentCar.guide_price" class="form-item_value" @click="openPopup('price')">
					<text v-if="form.quotation_price">{{form.quotation_price}}</text>
					<text v-else class="placeholder">请填写报价</text>
					<text class="text-red">
						<block v-if="form.quotation_price!==''">{{(quotationOption[form.quotation].unit).slice(0,1)}}
						</block>
						<block v-else>万</block>
					</text>
				</view>
				<view v-else class="form-item_value" style="align-items: center;">
					<input :cursorSpacing="20" v-model="form.quotation_price" type="digit" class="input"
						placeholder="请填写报价" style="text-align: right;" />
					<text class="text-red">
						<block v-if="form.quotation_price!==''">{{(quotationOption[form.quotation].unit).slice(0,1)}}
						</block>
						<block v-else>万</block>
					</text>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item_name"><text class="text-red">*</text>颜色</view>
				<view class="form-item_value"
					@click="jumpUrl('/pages/carSource/select/color?model_id='+form.model_two_id)">
					<text v-if="form.appearance_name==''&&form.interior_name==''" class="placeholder">请选择颜色</text>
					<text v-else>{{form.appearance_name}} | {{form.interior_name}}</text>
					<image class="form-item_more" src="@/static/fanhui.png" mode=""></image>
				</view>
			</view>
			<view class="form-item" v-if="currentCar.state==2||currentCar.state==3">
				<view class="form-item_name"><text class="text-red">*</text>车源状态</view>
				<view class="form-item_value">
					<uni-data-checkbox v-model="form.status" :localdata="statusOption" />
				</view>
			</view>
		</view>
		<view class="white-box">
			<view class="box-title">
				<text>交易细节</text>
				<view class="box-title_bg"></view>
			</view>
			<view class="form-item">
				<view class="form-item_name">车源所在地</view>
				<view class="form-item_value" @click="jumpUrl('/pages/carSource/select/province')">
					<text v-if="currentRegion.name"> <text
							v-if="currentRegion.registration_province">{{currentRegion.registration_province}}丨</text>
						{{currentRegion.name}}</text>
					<text v-else class="placeholder">请选择</text>
					<image class="form-item_more" src="@/static/fanhui.png" mode=""></image>
				</view>
			</view>
			<view class="form-item" v-if="currentCar.state==3">
				<view class="form-item_name">车架号</view>
				<view class="form-item_value" style="align-items: center;">
					<input :cursorSpacing="20" v-model="form.vin_code" class="input" placeholder="请输入车架号"
						style="text-align: right;" />
				</view>
			</view>
			<view class="form-item" v-if="currentCar.state==2||currentCar.state==3">
				<view class="form-item_name">配置</view>
				<view class="form-item_value" @click="openPopup('configuration')">
					<text v-if="form.configuration">{{form.configuration}}</text>
					<text v-else class="placeholder">请输入</text>
					<image class="form-item_more" src="@/static/fanhui.png" mode=""></image>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item_name">手续</view>
				<view class="form-item_value" @click="openPopup('procedures')">
					<text v-if="form.procedures_name">{{form.procedures_name}}</text>
					<text v-else class="placeholder">请输入</text>
					<image class="form-item_more" src="@/static/fanhui.png" mode=""></image>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item_name">排放标准</view>
				<view class="form-item_value">
					<uni-data-checkbox v-model="form.standard_id" :localdata="paifangbzOption" />
				</view>
			</view>
			<view class="form-item" v-if="currentCar.state==3">
				<view class="form-item_name">环保是否公开</view>
				<view class="form-item_value">
					<uni-data-checkbox v-model="form.environmental" :localdata="environmentalOption" />
				</view>
			</view>
			<view class="form-item form-item-colmun">
				<view class="form-item_name">图片</view>
				<view style="height:220rpx;overflow: hidden;">
					<jade-image-upload :list="media" :control="control" :columnType="columnType" :maxCount="maxCount"
						:maxListShowCount="maxListShowCount" :compressSize="compressSize" :compressQuality="compressQuality"
						:compressWidth='compressWidth' :imageSize="imageSize" :sourceType="sourceType" @chooseFile="chooseFile"
						@imgDelete="mediaDelete" :sizeType="['compressed']">
					</jade-image-upload>
					<!-- <view class="imagesBox">
						<view class="imagesBox_item" @click="chooseImage">
							<uni-icons type="camera" size="28"></uni-icons>
							<view class="addImage">添加图片</view>
						</view>
						<block v-for="(item,index) in form.cover_url" :key="index">
							<view class="imagesBox_item" v-if="index<2" @click="previewCoverUrl(index)">
								<view v-if="index==0" class="imagesBox_item_first">首图</view>
								<image @tap.stop="delImage(index)" class="imagesBox_item_close"
									src="@/static/login_clean.png" mode=""></image>
								<image class="imagesBox_item_img" :src="item.url" mode="aspectFill"></image>
							</view>
						</block>
					</view> -->
				</view>
				<view class="showImageAll" v-if="form.cover_url.length>2"
					@click="jumpUrl('/pages/carSource/select/images')">查看全部({{form.cover_url.length}})</view>
			</view>
			<view class="form-item form-item-colmun">
				<view class="form-item_name">备注</view>
				<view class="form-item_value tags">
					<view class="tag-item" v-for="(item,index) in remarkOption"
						:class="{'tag-active':remarkIds.indexOf(item.id)>-1}" @click="clickRemarkId(item,item.id)">
						{{item.name}}
					</view>
				</view>
				<textarea :cursorSpacing="20" :maxlength="-1" class="textarea" v-model="form.remark" placeholder="请输入"></textarea>
			</view>
		</view>
		<view class="fixed-bottom">
			<view class="btn" @click="_submit">发布车源</view>
		</view>
		<uni-popup ref="colors" background-color="transparent">
			<view class="selectBox">
				<view class="selectBox_title">选择{{colorState==2?'内饰':'外观'}}颜色</view>
				<view v-if="colorState==2" class="selectBox_content">
					<view class="selectBox_cell" :class="{'text-blue':form.interior_name==''}" @click="setColor({})">不限
					</view>
					<view class="selectBox_cell" :class="{'text-blue':form.interior_id==item.id}"
						v-for="(item,index) in colorOption" @click="setColor(item)">
						{{item.name}}
					</view>
					<view class="selectBox_cell" :class="{'text-blue':form.interior_id==''&&form.interior_name!=''}"
						@click="_customColor()">自定义颜色</view>
				</view>
				<view v-else class="selectBox_content">
					<view class="selectBox_cell" :class="{'text-blue':form.appearance_name==''}" @click="setColor({})">
						不限</view>
					<view class="selectBox_cell" :class="{'text-blue':form.appearance_id==item.id}"
						v-for="(item,index) in colorOption" @click="setColor(item)">
						{{item.name}}
					</view>
					<view class="selectBox_cell" :class="{'text-blue':form.appearance_id==''&&form.appearance_name!=''}"
						@click="_customColor()">自定义颜色</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="customColor" background-color="transparent">
			<view class="selectBox">
				<view class="selectBox_title">自定义颜色</view>
				<view class="customBox">
					<view class="input-box">
						<input :adjust-position="false" @blur="keyboardHeight=0" :cursorSpacing="20"
							v-model="customColor" class="input" placeholder="请输入颜色" />
					</view>
					<view class="btn" style="width: 173rpx;" @click="setCustomColor()">确定</view>
				</view>
			</view>
			<view :style="{height:keyboardHeight+'px'}"></view>
		</uni-popup>
		<uni-popup ref="price" background-color="transparent">
			<view class="selectBox">
				<view class="selectBox_title">报价优惠</view>
				<view class="quotationBox" v-if="currentCar.guide_price">
					<block v-for="(item,index) in quotationOption">
						<view class="quotationBox_item" :class="{'quotationBox_active':index==form.quotation}"
							@click="setQuotation(index)">
							{{item.name}}
						</view>
					</block>
				</view>
				<view class="customBox">
					<view class="input-box">
						<input :adjust-position="false" @blur="keyboardHeight=0" :cursorSpacing="20" v-model="price"
							type="digit" class="input" :placeholder="quotationOption[form.quotation].placeholder" />
						<view class="suffix">{{quotationOption[form.quotation].unit}}</view>
					</view>
					<view class="btn" style="width: 173rpx;" @click="setCustomPrice()">确定</view>
				</view>
			</view>
			<view :style="{height:keyboardHeight+'px'}"></view>
		</uni-popup>
		<uni-popup ref="configuration" background-color="transparent">
			<view class="selectBox">
				<view class="selectBox_title">配置</view>
				<view class="selectBox_content" style="padding: 0 28rpx;box-sizing: border-box;">
					<textarea :adjust-position="false" @blur="keyboardHeight=0" :maxlength="-1" :cursorSpacing="20" class="textareaFill"
						placeholder="请输入配置" v-model="configuration"></textarea>
				</view>
				<view class="selectBox_bottom">
					<view class="btn" @click="setConfiguration()">确定</view>
				</view>
			</view>
			<view :style="{height:keyboardHeight+'px'}"></view>
		</uni-popup>

		<uni-popup ref="procedures" background-color="transparent">
			<view class="selectBox">
				<view class="selectBox_title">选择手续</view>
				<view class="selectBox_content">
					<view class="selectBox_cell" :class="{'text-blue':form.procedures_name==''}"
						@click="setProcedures({})">
						不限</view>
					<view class="selectBox_cell" :class="{'text-blue':form.procedures_id==item.id}"
						v-for="(item,index) in procedures" @click="setProcedures(item)">
						{{item.name}}
					</view>
					<view class="selectBox_cell" :class="{'text-blue':form.appearance_id==''&&form.appearance_name!=''}"
						@click="_customProcedures()">自定义手续时间</view>
				</view>
				<!-- <view class="selectBox_bottom">
					<view class="btn" @click="closePopup('procedures')">确定</view>
				</view> -->
			</view>
		</uni-popup>
		<uni-popup ref="customProcedures" background-color="transparent">
			<view class="selectBox">
				<view class="selectBox_title">自定义手续</view>
				<view class="customBox">
					<view class="input-box">
						<input :adjust-position="false" @blur="keyboardHeight=0" :cursorSpacing="20"
							v-model="customProcedures" class="input" placeholder="请输入手续时间" />
					</view>
					<view class="btn" style="width: 173rpx;" @click="setCustomProcedures()">确定</view>
				</view>
			</view>
			<view :style="{height:keyboardHeight+'px'}"></view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		commonProcedures,
		emissionStandardList,
		newsCarsRemarksList,
		usedSearchColour,
		vehicleColor,
		newsCarsReleaseSave
	} from '@/api/source.js'
	import throttle from "@/utils/throttle.js";
	export default {
		data() {
			return {
				id: '',
				keyboardHeight: 0,
				offsetTop: uni.getSystemInfoSync().statusBarHeight + 44 || 44,
				statusOption: [{
					value: 1,
					text: '现车',
				}, {
					value: 2,
					text: '期货',
				}],
				environmentalOption: [{
					value: 0,
					text: '否',
				}, {
					value: 1,
					text: '是',
				}],
				procedures: [],
				paifangbzOption: [],
				remarkOption: [],
				colorOption: [],
				colorState: 1,
				customColor: '',
				customProcedures: '',
				configuration: '',
				quotationOption: {
					1: {
						short: '优惠',
						name: '优惠点数',
						unit: '点',
						placeholder: '请输入优惠点数'
					},
					2: {
						short: '优惠',
						name: '优惠万元',
						unit: '万元',
						placeholder: '请输入优惠钱数'
					},
					3: {
						short: '加价',
						name: '加价万元',
						unit: '万元',
						placeholder: '请输入加价钱数'
					},
					4: {
						short: '报价',
						name: '直接报价',
						unit: '万元',
						placeholder: '请直接输入价格'
					},
				},
				price: '',
				form: {
					"users_id": "",
					"cover_url": [],
					"brand_id": "",
					"series_one_id": "",
					"series_two_id": "",
					"source_type_id": "",
					"model_one_id": "",
					"model_two_id": "",
					"custom_name": "",
					"source_status": "1",
					"vin_code": "",
					"quotation": "1",
					"quotation_price": "",
					"appearance_id": "",
					"appearance_name": "",
					"appearance_color": "",
					"interior_id": "",
					"interior_name": "",
					"interior_color": "",
					"where_province_id": "",
					"where_city_id": "",
					"configuration": "",
					"procedures_id": "",
					"procedures_name": "",
					"standard_id": "",
					"remark_id": "",
					"remark": "",
					"sales_area": "",
					"environmental": ""
				},
				remarkIds: [],
				remarkList: [],
				currentCar: {
					brand_id: "",
					guide_price: "",
					id: "",
					name: "",
					pid: "",
					series_one_id: "",
					series_two_id: "",
					source_type_id: "",
					source_type_name: "",
					state: 1,
				},
				currentRegion: {
					id: "",
					name: "",
					registration_province: "",
					registration_province_id: "",

				},
				//上传图片相关变量
				control: true,
				columnType: 'other',
				maxCount: 20,
				maxListShowCount: 2,
				compressSize: 30,
				imageSize: 30,
				compressQuality: 0.8,
				compressWidth: 375,
				sourceType: ['album'],
				imageID: 0,
				uploadTask: null,
				media: [], //数据源
			};
		},
		async onLoad(e) {
			if (e.car != undefined) {
				this.currentCar = JSON.parse(e.car) || {}
				this.form.custom_name = this.currentCar.name;
				this.form.brand_id = this.currentCar.brand_id;
				this.form.series_one_id = this.currentCar.series_one_id;
				this.form.series_two_id = this.currentCar.series_two_id;
				this.form.source_type_id = this.currentCar.source_type_id;
				this.form.model_one_id = this.currentCar.pid || '';
				this.form.model_two_id = this.currentCar.id || '';
				this.form.quotation = this.currentCar.guide_price ? 1 : 4;
			} else {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: '请先选选择车型'
				})
				// #ifdef MP-WEIXIN
				wx.disableAlertBeforeUnload({})
				// #endif
				setTimeout(() => {
					uni.navigateBack();
				}, 1500)
			}

			await this._commonProcedures();
			await this._emissionStandardList();
			await this._newsCarsRemarksList();
			// 添加路由监听
			// #ifdef MP-WEIXIN
			wx.enableAlertBeforeUnload({
				message: '现在退出填写的内容将被清空\r\n确认退出?',
				success: (res) => {
					console.log(res);
				}
			})
			// #endif
		},
		onShow() {
			uni.onKeyboardHeightChange(res => {
				this.keyboardHeight = res.height
			})
		},
		onUnload() {
			uni.offKeyboardHeightChange();
			// 取消路由监听
			// #ifdef MP-WEIXIN
			wx.disableAlertBeforeUnload({})
			// #endif
		},
		methods: {
			showToast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none',
					mask: true
				});
			},
			_submit() {
				let that = this;
				let param = JSON.parse(JSON.stringify(this.form));
				throttle(() => {
					param.users_id = uni.getStorageSync('login').id || ''
					let remarkReguired = false;
					this.remarkList.map((item) => {
						if (item.reguired) {
							remarkReguired = true
						}
					})
					if (param.quotation_price == '') {
						this.showToast(this.quotationOption[this.form.quotation].placeholder)
						return;
					} else if (param.quotation_price == '') {
						this.showToast('请选择颜色')
						return;
					} else if ((this.currentCar.state == 2 || this.currentCar.state == 3) && param.status == '') {
						this.showToast('车源状态')
						return;
					} else if (param.remark == '' && remarkReguired) {
						this.showToast('请输入备注')
						return;
					}
					
					// console.log(JSON.stringify(param));
					newsCarsReleaseSave(param).then((res) => {
						this.showToast(res.message);
						if (res.code === 0) {
							// #ifdef MP-WEIXIN
							wx.disableAlertBeforeUnload({})
							// #endif
							setTimeout(() => {
								this.setBack();
							}, 300)
						}

					})
				}, 1000)
			},
			closePopup(ref) {
				this.$refs[ref].close();
			},
			openPopup(ref) {
				this.$refs[ref].open('bottom');
			},
			setQuotation(index) {
				this.price = ''
				this.form.quotation = index
			},
			setConfiguration() {
				this.form.configuration = this.configuration;
				this.closePopup('configuration');
			},
			setCustomPrice() {
				if (this.price == '') {
					this.showToast(this.quotationOption[this.form.quotation].placeholder)
					return
				}
				this.form.quotation_price = this.price;
				this.closePopup('price');
			},
			_customColor() {
				this.customColor = '';
				this.closePopup('colors');
				this.openPopup('customColor');
			},
			setCustomColor() {
				let field = this.colorState == 2 ? 'interior' : 'appearance';
				this.form[`${field}_name`] = this.customColor;
				this.closePopup('customColor');
				if (this.colorState == 1) {
					this.showColor(2)
				}
			},
			async showColor(state) {
				this.colorState = state;
				await this._usedSearchColour();
				this.$refs.colors.open('bottom')
			},
			setColor(item) {
				let field = this.colorState == 2 ? 'interior' : 'appearance';
				this.form[`${field}_id`] = item.id || '';
				this.form[`${field}_name`] = item.name || '不限';
				this.form[`${field}_color`] = item.color || '';
				if (this.colorState == 2) {
					this.$refs.colors.close();
				} else {
					this.showColor(2)
				}

			},
			setProcedures(item) {
				this.form.procedures_name = item.name || '';
				this.form.procedures_id = item.id || '';
				this.closePopup('procedures');
			},
			_customProcedures() {
				this.closePopup('procedures');
				this.openPopup('customProcedures');
			},
			setCustomProcedures() {
				this.form.procedures_id = '';
				this.form.procedures_name = this.customProcedures;
				this.closePopup('customProcedures')
			},
			_emissionStandardList() {
				emissionStandardList({
					source_type_id: this.currentCar.source_type_id
				}).then((res) => {
					this.paifangbzOption = res.data.map((item) => {
						return {
							value: item.id,
							text: item.name
						}
					})
				})
			},
			_newsCarsRemarksList() {
				newsCarsRemarksList({
					source_type_id: this.currentCar.source_type_id
				}).then((res) => {
					this.remarkOption = res.data || []
				})
			},
			_commonProcedures() {
				commonProcedures({
					source_type_id: this.currentCar.source_type_id
				}).then((res) => {
					this.procedures = res.data || []
				})
			},
			/**
			 * @param {Object} state 颜色类型1：外观 2：内饰
			 */
			_usedSearchColour() {
				if (this.form.model_two_id == '') {
					vehicleColor({
						car_color_state: this.colorState
					}).then((res) => {
						this.colorOption = res.data || []
					})
				} else {
					usedSearchColour({
						model_id: this.currentCar.id,
						state: this.colorState
					}).then((res) => {
						this.colorOption = res.data || []
					})
				}

			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			setBack() {
				var pages = getCurrentPages()
				let num = 0;
				const prevPage = pages.find((page, index) => {
					if (page.route == 'main/carSourceList/releaseCar') {
						num = index;
					}else if(page.route == 'pages/home/newCarSearch/quotation/quotation'){
						num = index;
					}
				})
				var delta = pages.length - num - 1;
				uni.navigateBack({
					delta: delta
				})
			},
			backData(data) {
				//console.log(data);
				if (data.type === 'model') {
					this.currentCar = data.data;
					this.form.custom_name = this.currentCar.name;
					this.form.brand_id = this.currentCar.brand_id;
					this.form.series_one_id = this.currentCar.series_one_id;
					this.form.series_two_id = this.currentCar.series_two_id;
					this.form.source_type_id = this.currentCar.source_type_id;
					this.form.model_one_id = this.currentCar.pid || '';
					this.form.model_two_id = this.currentCar.id || '';
					this._emissionStandardList();
					this._newsCarsRemarksList();
				} else if (data.type === 'color') {
					this.form.appearance_id = data.data.appearance_id || '';
					this.form.appearance_color = data.data.appearance_color || '';
					this.form.appearance_name = data.data.appearance_name || '';
					this.form.interior_id = data.data.interior_id || '';
					this.form.interior_color = data.data.interior_color || '';
					this.form.interior_name = data.data.interior_name || '';

				} else if (data.type === 'region') {
					this.currentRegion = data;
					this.form.where_city_id = data.id || '';
					this.form.where_province_id = data.registration_province_id || '';
				}

			},
			clickRemarkId(item, id) {
				var i = this.remarkIds.indexOf(id);
				if (i > -1) {
					this.remarkIds.splice(i, 1);
					this.remarkList.splice(i, 1);
				} else {
					this.remarkIds.push(id);
					this.remarkList.push(item);
				}
				this.form.remark_id = this.remarkIds.join(',')
			},
			delImage(index) {
				this.form.cover_url.splice(index, 1)
			},
			previewCoverUrl(index) {
				let urls = this.form.cover_url.map((item) => {
					return item.url ? item.url : item.img
				})

				uni.previewImage({
					urls,
					current: index
				})
			},
			resetCoverUrl(data) {
				this.media = data;
				this.form.cover_url=data.map((item)=>{
					return {
						id: item.id || '',
						save: item.save || '1',
						url:item.path,
						file_size: item.size || 0
					}
				})
			},
			chooseImage() {
				let cover_url = this.form.cover_url;
				uni.chooseMedia({
					count: 20,
					mediaType: ['image'],
					sizeType: ['compressed'],
					success: async (res) => {
						console.log(res);
						await res.tempFiles.map((item) => {
							// console.log(item);
							var extname = item.tempFilePath.split(".").pop();
							uni.getFileSystemManager().readFile({
								filePath: item.tempFilePath, //照片的临时地址
								encoding: "base64", //编码格式
								success: (res) => {
									console.log(res)
									cover_url.push({
										"save": "1",
										"url": item.tempFilePath,
										"natural": "2",
										"img": `data:image/${extname};base64,${res.data}`,
										"file_size": item.size
									})
								},
							})
						});
						this.form.cover_url = cover_url;
					}
				})
			},
			//上传
			chooseFile(e) {
				this.uploadFileToServe(e)
			},
			//中断上传并删除
			mediaDelete(e) {
				this.uploadTask ? this.uploadTask.abort() : ''
				this.media.splice(e, 1)
				this.form.cover_url.splice(e, 1)
			},
			//上传逻辑处理
			uploadFileToServe(urlList) {
				if (!urlList || urlList.length <= 0) {
					return
				};
				urlList.forEach((item) => {
					var that = this
					this.uploadTask = uni.uploadFile({
						url: 'https://api.cst365.top/V1/common/uploadPictures',
						filePath: item.src,
						name: 'file',
						success: (res) => {
							let data = JSON.parse(res.data)
							if (!data.data.url) {
								item.status = 'error'
								item.progress = '上传失败'
							} else {
								item.status = 'success'
								item.progress = '上传成功'
								item.src = data.data.url
								item.path = data.data.path
								var str = JSON.stringify(item);
								const jsonObj = JSON.parse(str.replace(/\\\\\\\\/g, '\\'))
			
								that.form.cover_url.push({
									id: "",
									save: "1",
									url:jsonObj.path,
									file_size: item.size || 0
									
								})
							}
						}
					});
					this.uploadTask.onProgressUpdate((res) => {
						item.percent = res.progress;
						this.media.splice(item.index, 1, item)
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 162rpx;
	}

	.white-box {
		margin-top: 20rpx;
		background-color: #fff;
		padding-top: 30rpx;
	}

	.box-title {
		font-size: 30rpx;
		font-weight: 800;
		color: #05052A;
		position: relative;
		padding: 0 28rpx;
		box-sizing: border-box;
		margin-bottom: 8rpx;

		&_bg {
			position: absolute;
			bottom: 10rpx;
			left: 27rpx;
			width: 60rpx;
			height: 11rpx;
			background: rgba(96, 152, 253, 0.3);
			border-radius: 50%;
		}
	}

	.form-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		padding: 40rpx 28rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #E6E6E6;

		&_name {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		&_value {
			padding-left: 20rpx;
			box-sizing: border-box;
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: flex-end;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		&_more {
			width: 13rpx;
			height: 16rpx;
			margin-top: 15rpx;
			margin-left: 19rpx;
		}

		&_tips {
			font-size: 20rpx;
			color: #666666;
			margin-top: 20rpx;
		}
	}

	.form-item-colmun {
		display: flex;
		flex-direction: column;

		.form-item_name {
			margin-bottom: 20rpx;
		}

		.form-item_value {
			width: 100%;
			justify-content: flex-start;
			padding-left: 0;
		}
	}

	.tags {
		flex-wrap: wrap;

		.tag-item {
			min-width: 150rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFFFFF;
			border: 1rpx solid #EDF1FF;
			border-radius: 30rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.tag-active {
			background-color: #EDF1FF;
			color: #0E59EA;
			border: 1px solid #EDF1FF;
		}
	}

	.form-item:last-child {
		border: none;
	}

	.selectBox {
		padding: 40rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		&_title {
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #000000;
			margin-bottom: 30rpx;
		}

		&_content {
			max-height: 50vh;
			overflow: auto;
			margin-bottom: 30rpx;
		}

		&_cell {
			padding: 30rpx 28rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			border-bottom: 1rpx solid #E6E6E6;
		}

		&_cell:last-child {
			border: none;
		}

		&_bottom {
			padding: 0 28rpx;
		}

		.quotationBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			padding: 0 28rpx;
			box-sizing: border-box;

			&_item {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: #FFFFFF;
				border: 1px solid #CCCCCC;
				border-radius: 4rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			&_active {
				background: #0E59EA;
				color: #FFFFFF;
				border: 1px solid #0E59EA;
			}
		}

		.customBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 28rpx;
			box-sizing: border-box;

			.input-box {
				flex: 1;
				padding-right: 23rpx;
				box-sizing: border-box;
				position: relative;

				.suffix {
					position: absolute;
					right: 36rpx;
					top: 26rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF0F0F;
				}
			}

			.input {
				width: 100%;
				height: 92rpx;
				background: #F3F3F3;
				border-radius: 14rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				padding: 0 80rpx 0 24rpx;
				box-sizing: border-box;
			}
		}
	}

	.text-red {
		color: #FF0F0F;
		margin-right: 8rpx;
	}

	.text-blue {
		color: #2D56C5 !important;
	}

	.marginLeft20 {
		margin-left: 20rpx;
	}

	.marginLeft32 {
		margin-left: 32rpx;
	}

	.flex-c {
		display: flex;
		align-items: center;
	}

	.radio-text {
		margin-left: 8rpx;
	}

	.textarea {
		width: 100%;
		border: 1px solid #EDF1FF;
		height: 230rpx;
		border-radius: 16rpx;
		padding: 18rpx 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.textareaFill {
		width: 100%;
		height: 373rpx;
		border-radius: 16rpx;
		padding: 33rpx 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		background: #F3F3F3;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 41rpx 28rpx;
		width: 100%;
		z-index: 98;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);


	}

	.btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #2D56C5;
		border-radius: 14rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		box-sizing: border-box;
	}

	.placeholder {
		color: #666666;
	}

	.imagesBox {
		display: flex;
		flex-wrap: wrap;

		&_item {
			position: relative;
			font-size: 24rpx;
			color: #828294;
			background-color: #F4F4F4;
			width: 210rpx;
			height: 162rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 0 20rpx 20rpx 0;

			&_img {
				width: 100%;
				height: 100%;
			}

			&_first {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9;
				background-color: #0E59EA;
				color: #ffffff;
				font-size: 24rpx;
				padding: 4rpx 10rpx;
				border-radius: 20rpx 0 20rpx 0;
			}

			&_close {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				z-index: 9;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.showImageAll {
		width: 100%;
		margin-top: 20rpx;
		text-align: center;
		color: #666666;
	}

	/deep/.uni-data-checklist .checklist-group .checklist-box {
		margin-right: 0 !important;
		margin-left: 25px !important;
	}
</style>